<template>
	<view class="loading-box" v-if="loading">
		<u-loading mode="circle" size="60"></u-loading>
		<text>加载中...</text>
	</view>
	<view v-else class="content" :style="`background:${readTheme.tipsBackground}`">
		<view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
		<view class="search-box u-p-t-20 u-p-b-20 u-p-r-28 u-p-l-28" :style="`background:${readTheme.tabbarBackground}`">
			<u-search placeholder="搜一搜" v-model="keyword" disabled :show-action="false" @click="handleToSearch" :bg-color="readTheme.placeholderBackground" :placeholder-color="readTheme.placeholderColor"></u-search>
		</view>

		<!-- 轮播图 -->
		<view class="u-m-t-30 u-m-b-30 u-m-r-28 u-m-l-28">
			<banner-list :bannerList="bannerList"></banner-list>
		</view>

		<!-- 热门推荐 -->
		<view class="u-m-b-30" v-if="overList.length > 0">
			<plate-header title="热门推荐" @getMore="clickToMore('hot')"></plate-header>
			<scroll-list>
				<normal-card class="u-m-r-30" v-for="item in overList" :key="item.book_id" :bookId="item.book_id" :name="item.name"
				 :writer="item.writer" :image="item.image"></normal-card>
			</scroll-list>
		</view>

		<!-- 点击排行 -->
		<view class="u-m-b-30" v-if="clickList.length > 0">
			<plate-header title="点击排行" @getMore="clickToMore('rank')"></plate-header>
			<scroll-list>
				<normal-card class="u-m-r-30" v-for="item in clickList" :key="item.book_id" :bookId="item.book_id" :name="item.name"
				 :writer="item.writer" :image="item.image"></normal-card>
			</scroll-list>
		</view>

		<!-- 最近更新 -->
		<view class="u-m-b-30" v-if="updateList.length > 0">
			<plate-header title="最近更新" @getMore="clickToMore('update')"></plate-header>
			<scroll-list>
				<normal-card class="u-m-r-30" v-for="item in updateList" :key="item.book_id" :bookId="item.book_id" :name="item.name"
				 :writer="item.writer" :image="item.image"></normal-card>
			</scroll-list>
		</view>

		<!-- 分类推荐 -->
		<view>
			<plate-header title="分类推荐" @getMore="clickToMore('category')"></plate-header>
			<view class="filter-box" :style="`background:${readTheme.tabbarBackground}`">
				<u-subsection :list="bookTypeList" :current="0" active-color="#92c8ff" mode="subsection" @change="typeChange"></u-subsection>
			</view>
			<scroll-list>
				<normal-card class="u-m-r-30" v-for="item in currentTypeList" :key="item.book_id" :bookId="item.book_id" :name="item.name"
				 :writer="item.writer" :image="item.image"></normal-card>
			</scroll-list>
		</view>

		<u-divider :bg-color="readTheme.tipsBackground" :color="readTheme.defalutColor"  margin-bottom="40" margin-top="40">人家是有底线的~</u-divider>

		<!-- 底部导航 -->
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		getBannerList,
		getUpdateList,
		getOverList,
		getClickList,
		getTypeList
	} from '@/api/homepage.js'
	import {
		getBookType
	} from '@/api/common.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		setStorageSync,
		getStorageSync
	} from '@/utils/storage.js'
	export default {
		data() {
			return {
				loading: false,
				keyword: '',
				currentType: 0,
				bookTypeList: getStorageSync('bookTypeList') || [],
				bannerList: getStorageSync('bannerList') || [],
				overList: getStorageSync('overList') || [],
				clickList: getStorageSync('clickList') || [],
				updateList: getStorageSync('updateList') || [],
				typeList: getStorageSync('typeList') || [],
			}
		},
		computed: {
			currentTypeList() {
				return this.typeList[this.currentType] ? this.typeList[this.currentType].list : []
			},
			...mapState({
				iStatusBarHeight: state => state.global.iStatusBarHeight
			}),
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				if (this.bannerList.length === 0) {
					this.loading = true
				}
				Promise.all([
					getTypeList(),
					getBannerList(),
					getUpdateList(),
					getOverList(),
					getClickList(),
					getBookType()
				]).then(resList => {
					this.typeList = resList[0].data
					this.bannerList = resList[1].data.list
					this.updateList = resList[2].data.list
					this.overList = resList[3].data.list
					this.clickList = resList[4].data.list
					this.bookTypeList = resList[5].data.bookType
					this.bookTypeList.forEach(item => {
						item.name = item.name.slice(0, 2)
					})
					setStorageSync('typeList', this.typeList)
					setStorageSync('bannerList', this.bannerList)
					setStorageSync('updateList', this.updateList)
					setStorageSync('overList', this.overList)
					setStorageSync('clickList', this.clickList)
					setStorageSync('bookTypeList', this.bookTypeList)
					this.loading = false
				}).catch(e => {
					this.loading = false
				})
			},
			clickToMore(name) {
				uni.navigateTo({
					url: `/pages/${name}/index`
				})
			},
			typeChange(index) {
				this.currentType = index
			},
			handleToSearch() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-box {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			margin-top: 20upx;
		}
	}

	.content {

		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
			background: #ffffff;
			position: sticky;
			top: 0;
			z-index: 1;
		}

		.search-box {
			position: sticky;
			top: var(--status-bar-height);
			background-color: #fff;
			z-index: 10;
		}

		.filter-box {
			padding: 0 20upx 20upx 20upx;
			background-color: #fff;
		}
	}
</style>
